
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>注册/登录</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/SHA1.js"></script>
    <style>
        .empty {
            text-align: center;
            padding: 50px 0;
        }
        body{
          padding: 0;
          margin: 0;
          background-image: url(../image/login-6.jpg);
          background-repeat: no-repeat;
          background-size: 100%;
        }
        a{
        	 text-decoration:none;
        	 color: #000;
        }
        a:hover{
        	text-decoration: underline;
        }
        .top{
        	width:100%;
        	height: 40px;
        	margin: 0px auto 0px;
        	color:#000;
        	border:0px;
        	display: block;
        	text-align: center;
        }
        .leftreturn{
          position: absolute;
          left:0;
          z-index: 5;
          background-image: url("../image/leftreturn.png");
          background-position: 0px 0px;
          width:25px;
          height:25px;
          margin:7.5px 0;
        }
        .top-title{
          line-height: 40px;
          font-size: 20px;
        }
        .login_cont{
        	width: 100%;
        	height: 280px;
        	line-height: 10px;
        	margin:0px auto;
        	padding: 0;
        }

        .login_cont table{
          width: 100%;
        	height: auto;
        	padding: 0px;
        	font-size: 16px;
        	//border:1px solid red;
        }
/*
        .login_cont td input{
          border: 1px solid #57a3f3;
          //border-radius:30px;
          //outline:none;
        }

        .login_cont td input:focus {
            outline: -webkit-focus-ring-color auto 5px;
            box-shadow: 0 0 0 2px rgba(45,140,240,.2);
        }
*/
.mui-password{
  width: 60%;
  padding: 3px;
  font-size: 18px;
  border-bottom: 1.5px solid #57a3f3;
  margin:5px auto;
  height:35px;
  line-height: 35px;
  background-image: url(../image/密码.png);
  background-repeat: no-repeat;
}
.mui-username{
  width: 60%;
  padding: 3px;
  font-size: 18px;
  border-bottom: 1.5px solid #57a3f3;
  margin:5px auto;
  height:35px;
  line-height: 35px;
  background-image: url(../image/用户名.png);
  background-repeat: no-repeat;
}
.capital{
    width:80%;
    outline: none;
    font-size: 16px;
    line-height: 35px;
    display: inline-block;
    padding-left: 45px;
    height:20px;
}
.reg_submit{
  border: 1px;
  border-radius: 8px;
  background-color: #e9daaf;
  color: #5e6762;
  font-weight: bold;
  padding: 10px 15px;;
}
input{
  border:0;
  outline: none;
}
    </style>
</head>

<body>
  <div class="top">
    <i class="leftreturn"></i>
    <h1 class="top-title">登录</h1>
  </div>
    <div class="empty">
      <br>
        <h2>登录页面</h2>

        <div class="login_cont">

        					<div align="center">
        						<table align="center">

        								<tr>
        									<td>
                            <div class="mui-username">
                            <input type="text" name="username" id="username" placeholder="请输入用户名" class="capital mui-input-clear">
                          </div>
                        </td>

        								</tr>
        								<tr>
        									<td>
                            <div class="mui-password">
                          <input type="password" name="password" id="password" placeholder="请输入密码" class="capital mui-input-clear">
                          </div>
                        </td>

        								</tr>



        								<tr>
        									<td align="center" colspan="2" style="height:50px;">
        										<input type="submit" value="登录"  tapmode="highlight" class="reg_submit" onclick="login_submit()">&nbsp;&nbsp;&nbsp;&nbsp;
        										<input type="reset" value="重置" tapmode="highlight" onclick="clear1()">
        									</td>
        								</tr>
        								<tr>
        									<td align="center" >
        										<a href="javascript:;" onclick="open_register();" style="margin-top:10px;">未注册，请先注册</a>
        									</td>
        								</tr>

        						</table>

        					</div>

        </div>
    </div>
</body>
</html>

<script type="text/javascript">

apiready=function(){
}


//重置输入框
  function clear1(){
document.getElementById('username').value='';
document.getElementById('password').value='';
  }


  //打开注册窗口
  function open_register(){
    api.openWin({
            name: 'register',
            url: 'register.html',
            opaque: true,
            vScrollBarEnabled: false
    });
  }
  //登录提交
  function login_submit(){
    login_database();
  }
  ////登录连接数据库
  ///注意：以下是用ajax方式实现登入。目前问题是：该段代码在user.html中可以运行，并实现了登入，
  //但在login.html中似乎没有作用，原因在排查中。。。  排查后我们可以用$api.setStorage('userInfo', ret);
  //来实现用户信息的保存，以此完成个人界面。
  function login_database(){

    username=document.getElementById('username').value;
    password=document.getElementById('password').value;

    var now = Date.now();
     appKey = SHA1("A6032422409194"+"UZ"+"808CF36B-60D4-DC5D-C9F3-FB49F9E1FB44"+"UZ"+now)+"."+now
     api.ajax({
         url: 'https://d.apicloud.com/mcm/api/user/login',
         method: 'post',
         headers: {
             "X-APICloud-AppId": "A6032422409194",
             "X-APICloud-AppKey": appKey
         },
         data: {
             values: {
                 "username": username,
                 "password": password
             }
         }
     }, function(ret, err) {
         if (ret) {
             // 保存用户信息
             $api.setStorage('userInfor', ret);


             api.alert({
                 title: '提示',
                 msg: '登录成功',
             }, function(ret, err) {
                 if (ret) {
                     closelogin();
                 }
             });
         } else {
             api.toast({
                 msg: '登录失败，用户名或密码错误',
                 duration: 2000,
                 location: 'middle'
             });
         }
     });
}

  //关闭登录窗口
  function closelogin(){
    api.openFrame({
				name : 'abc',
				url : '../index.html',
				rect : {
					x : 0,
					y : 0,
					w : api.winWidth,
					h : api.winHeight
				},
				pageParam : {
				},
				bounces : true,
				bgColor : 'rgba(0,0,0,0)',
				vScrollBarEnabled : false,
				hScrollBarEnabled : false
		});
  }


</script>
